//! This is a simple example of 
//! 1. form/GET/POST
//! 
use leptos::*;
use serde::*;
use chrono::prelude::*;
use leptos::{html::Input, IntoView };
use thiserror::Error;
use anyhow::Result;
use leptos_meta::*;
use leptos_router::*;


#[component]
pub fn UrlParamPage() -> impl IntoView {
    
    let qry = use_query_map();
    let query = move || qry.get().get("query").cloned().unwrap_or_default();
   
    view! {        
        <Title text="Url query parser/inner-style"/>
        <div>  "result: " {query}  </div>
        <div>
        <GetForm/>
        <br/>      
        <InnerStyle/>       
        </div>
    }    
}



#[component]
pub fn GetForm() -> impl IntoView {    
    
    view! {
        <div>
            <label>
                "this is a form GET example within leptos, axum-get in navigation bar"                
            </label>          
            <br/>
            <Form method="GET" action="">
            <input type="search" name="query" value="hello"/>
            <button type="submit">"submit"</button>
            </Form>               
        </div>
    }
    
}

#[component]
pub fn InnerStyle() -> impl IntoView {
  
    view! {                
        <div>     
        <label>
        "this is example with style css"                
        </label><br/>    
        <table  border="1" cellpadding="0" cellspacing="0" id="futures">	   			
        <tr><th>Name</th><th>Count</th><th>Last</th><th>win</th><th>loss</th><th>multiple</th><th>size</th><th>xtime</th> </tr>              
        <tr><td>"name"</td><td>"100"</td><td>"" </td><td> "" </td><td>""</td><td>""</td><td>""</td><td>""</td>
        </tr>			        
        </table>
        <br/>
        <label>
        "this is example without style css"                
        </label><br/>  
        <table  border="1" cellpadding="0" cellspacing="0">	   			
        <tr><th>Name</th><th>Count</th><th>Last</th><th>win</th><th>loss</th><th>multiple</th><th>size</th><th>xtime</th> </tr>              
        <tr><td>"name"</td><td>"100"</td><td>"" </td><td> "" </td><td>""</td><td>""</td><td>""</td><td>""</td>
        </tr>			        
        </table>
        </div>
    }
}
 
